// 全局消息提示工具

// 显示错误消息
export function showErrorMessage(message: string, duration: number = 3000) {
    // 创建一个简单的提示元素
    const messageDiv = document.createElement('div')
    messageDiv.style.cssText = `
        position: fixed;
        top: 20px;
        right: 20px;
        background: #f56c6c;
        color: white;
        padding: 12px 20px;
        border-radius: 4px;
        z-index: 9999;
        font-size: 14px;
        box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
        max-width: 300px;
        word-wrap: break-word;
        animation: slideIn 0.3s ease-out;
    `

    // 添加动画样式
    const style = document.createElement('style')
    style.textContent = `
        @keyframes slideIn {
            from {
                transform: translateX(100%);
                opacity: 0;
            }
            to {
                transform: translateX(0);
                opacity: 1;
            }
        }
    `
    document.head.appendChild(style)

    messageDiv.textContent = message
    document.body.appendChild(messageDiv)

    // 自动移除提示
    setTimeout(() => {
        if (document.body.contains(messageDiv)) {
            messageDiv.style.animation = 'slideOut 0.3s ease-in'
            messageDiv.style.animationFillMode = 'forwards'

            // 添加滑出动画
            const slideOutStyle = document.createElement('style')
            slideOutStyle.textContent = `
                @keyframes slideOut {
                    from {
                        transform: translateX(0);
                        opacity: 1;
                    }
                    to {
                        transform: translateX(100%);
                        opacity: 0;
                    }
                }
            `
            document.head.appendChild(slideOutStyle)

            setTimeout(() => {
                if (document.body.contains(messageDiv)) {
                    document.body.removeChild(messageDiv)
                }
                if (document.head.contains(style)) {
                    document.head.removeChild(style)
                }
                if (document.head.contains(slideOutStyle)) {
                    document.head.removeChild(slideOutStyle)
                }
            }, 300)
        }
    }, duration)
}

// 显示成功消息
export function showSuccessMessage(message: string, duration: number = 3000) {
    const messageDiv = document.createElement('div')
    messageDiv.style.cssText = `
        position: fixed;
        top: 20px;
        right: 20px;
        background: #67c23a;
        color: white;
        padding: 12px 20px;
        border-radius: 4px;
        z-index: 9999;
        font-size: 14px;
        box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
        max-width: 300px;
        word-wrap: break-word;
        animation: slideIn 0.3s ease-out;
    `

    const style = document.createElement('style')
    style.textContent = `
        @keyframes slideIn {
            from {
                transform: translateX(100%);
                opacity: 0;
            }
            to {
                transform: translateX(0);
                opacity: 1;
            }
        }
    `
    document.head.appendChild(style)

    messageDiv.textContent = message
    document.body.appendChild(messageDiv)

    setTimeout(() => {
        if (document.body.contains(messageDiv)) {
            messageDiv.style.animation = 'slideOut 0.3s ease-in'
            messageDiv.style.animationFillMode = 'forwards'

            const slideOutStyle = document.createElement('style')
            slideOutStyle.textContent = `
                @keyframes slideOut {
                    from {
                        transform: translateX(0);
                        opacity: 1;
                    }
                    to {
                        transform: translateX(100%);
                        opacity: 0;
                    }
                }
            `
            document.head.appendChild(slideOutStyle)

            setTimeout(() => {
                if (document.body.contains(messageDiv)) {
                    document.body.removeChild(messageDiv)
                }
                if (document.head.contains(style)) {
                    document.head.removeChild(style)
                }
                if (document.head.contains(slideOutStyle)) {
                    document.head.removeChild(slideOutStyle)
                }
            }, 300)
        }
    }, duration)
} 